<template>
<div>
  <div class="movehrad">
    <myhread></myhread>
    <myhread2></myhread2>
  </div>

   <div class="app_tlti">
        <div class="app_city">
          <router-link class="app_name" to="/city">深圳<span class="drop"></span></router-link>
          <i class="app_xia"></i>
        </div>
        <div class="app_dao">
          <router-link class="hot-item" to="reying">热映</router-link>
          <router-link class="hot-item" to="yingyuan">影院</router-link>
          <router-link class="hot-item" to="daiying">待映</router-link>
          <router-link class="hot-item" to="jingdian">经典电影</router-link>
        </div>
        <a href="#" class="link"></a>
    </div>

    <div class="movie-con">
       <!-- 设置子路由的路由出口 -->
      <router-view></router-view>
    </div>
</div>
</template>

<script>
//引入axios
import axios from "axios";
import Myhread from "../../components/myhread.vue";
import Myhread2 from "../../components/myhread2.vue";
export default {
  name: "Movie",
  data(){
    return {
      reying:[]//电影数据
    };
  },
  mounted(){
    //使用axios获取数据
    axios.get("/api/mmdb/movie/v3/list/hot.json?ct=%E6%B7%B1%E5%9C%B3&ci=30&channelId=4").then(rel=>{
      console.log(rel);
      //图片w.h会报错，修改
      rel.data.data.hot.forEach(item => {
        item.img = item.img.replace("w.h","128.180");
      });
      this.reying = rel.data.data.hot;
      console.log(this.reying);
    });
  },
  components:{
    Myhread,
    Myhread2
  },
};
</script>

<style scoped>
.movehrad{
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  left: 0;
  z-index: 10;
}

.movie-con {
  margin-top: 4.266667rem;
  margin-bottom: 1.333333rem;
}

.app_dao a.router-link-exact-active{
  font-size: .48rem;
  color: #000;
  border-bottom: .05333333333333334rem solid #f03d37;
}

.app_tlti {
    position: fixed;
    top: 2.8266666666666667rem;
    width:100%;
    z-index: 2;
    height: .88rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: .02666666666666667rem solid #ccc;
    padding: .26666666666666666rem 0;
}

.app_city {
    color: #666;
    display: flex;
    align-items: center;
    padding-left: .37333333333333335rem;
    font-size: .37333333333333335rem;
}

.app_name{
  color:#666;
}

.app_tlti .app_city .drop {
  display: inline-block;
  position: absolute;
  top: .6933333333333334rem;
  width: 0;
  height: 0;
  margin-left: 0.08rem;
  border: 0.08rem solid transparent;
  border-top-color: #b0b0b0;
}

.app_xia {
    display: inline-block;
    width: .5333333333333333rem;
    height: .5333333333333333rem;
    /* background: url("img/下.png") no-repeat 2px 8px; */
    background-size: .24rem;
}

.app_dao {
    display: flex;
    height: .88rem;
    line-height: .88rem;
    position: relative;
    justify-content: space-around;
}

.hot-item {
    font-size: .37333333333333335rem;
    color: #666;
    text-align: center;
    margin: 0 2.333333vw;
    font-weight: 700;
}

.link {
    width: .4rem;
    height: .4rem;
    background: url("https://s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/component/index/img/base64/search-red.png") no-repeat;
    background-size: .4rem;
    padding: .2rem .32rem .2rem .2rem;
    background-position: .2rem;
    cursor: pointer;
}

.activ {
    font-size: .48rem;
    color: #000;
    border-bottom: .05333333333333334rem solid #f03d37;
}

</style>